import React from 'react';
import styled from 'styled-components';

import Button from '../../../components/Button';
import Card from '../../../components/Card';
import CardContent from '../../../components/CardContent';
import CardIcon from '../../../components/CardIcon';
import { AddIcon, RemoveIcon } from '../../../components/icons';
import IconButton from '../../../components/IconButton';
import Label from '../../../components/Label';
import Value from '../../../components/Value';

import useApprove, { ApprovalState } from '../../../hooks/useApprove';
import useModal from '../../../hooks/useModal';
import useTokenBalance from '../../../hooks/useTokenBalance';

import { getDisplayBalance } from '../../../utils/formatBalance';

import DepositModal from './DepositModal';
import WithdrawModal from './WithdrawModal';
import useBasisCash from '../../../hooks/useBasisCash';
import useStakedBalanceOnBoardroom from '../../../hooks/useStakedBalanceOnBoardroom';
import TokenSymbol from '../../../components/TokenSymbol';
import useStakeToBoardroom from '../../../hooks/useStakeToBoardroom';
import useWithdrawFromBoardroom from '../../../hooks/useWithdrawFromBoardroom';
import useBoardroomVersion from '../../../hooks/useBoardroomVersion';
import useRedeemOnBoardroom from '../../../hooks/useRedeemOnBoardroom';
import config from '../../../config';
import useLPBonusRatio from "../../../hooks/useLPBonusRatio";
import useCashPriceInEstimatedTWAP from "../../../hooks/useCashPriceInEstimatedTWAP";

interface StakeProps {
  v: boolean;
}

const Stake: React.FC<StakeProps> = ({v}) => {
  const basisCash = useBasisCash();
  const boardroomVersion = useBoardroomVersion(v);
  console.log('basisCash.boardroomByVersion',basisCash,'^^^^',basisCash.boardroomByVersion, '@@@@',boardroomVersion)
  const [approveStatus, approve] = useApprove(
    basisCash.externalTokens['s' + config.group.toUpperCase() + '_SHARE_LP'],
    basisCash.boardroomByVersion(v).address,
  );

  const tokenBalance = useTokenBalance(basisCash.externalTokens['s' + config.group.toUpperCase() + '_SHARE_LP']);
  const stakedBalance = useStakedBalanceOnBoardroom(v);
  const isOldBoardroomMember = boardroomVersion !== 'latest';
  const cashStat = useCashPriceInEstimatedTWAP();
  const bonusRatio = useLPBonusRatio();

  const { onStake } = useStakeToBoardroom(v);
  const { onWithdraw } = useWithdrawFromBoardroom(v);
  const { onRedeem } = useRedeemOnBoardroom(v, 'Redeem LP for Boardroom Migration');

  const [onPresentDeposit, onDismissDeposit] = useModal(
    <DepositModal
      max={tokenBalance}
      onConfirm={(value) => {
        onStake(value);
        onDismissDeposit();
      }}
      tokenName={'s' + config.group.toUpperCase() + '_SHARE_LP'}
    />,
  );

  const [onPresentWithdraw, onDismissWithdraw] = useModal(
    <WithdrawModal
      max={stakedBalance}
      onConfirm={(value) => {
        onWithdraw(value);
        onDismissWithdraw();
      }}
      tokenName={'s' + config.group.toUpperCase() + '_SHARE_LP'}
    />,
  );

  return (
    <Card>
      <CardContent>
        <StyledCardContentInner>
          <StyledCardHeader>
            <CardIcon>
              <TokenSymbol symbol="MEDX" />
            </CardIcon>
            <Value value={getDisplayBalance(stakedBalance)} />
            <Label text={'质押 s' + config.group.toUpperCase() + '-SHARE-LP'} />
            <Value value={(100*bonusRatio).toFixed(4) + "%"} disabled={Number(cashStat?.priceInDAI) < config.boardroomRatioMin}/>
            <Label text={'每日董事会分红'} />
          </StyledCardHeader>
          <StyledCardActions>
            {!isOldBoardroomMember && approveStatus !== ApprovalState.APPROVED ? (
              <Button
                disabled={approveStatus !== ApprovalState.NOT_APPROVED}
                onClick={approve}
                text={'批准 s' + config.group.toUpperCase() + '-SHARE-LP'}
              />
            ) : isOldBoardroomMember ? (
              <>
                <Button
                  onClick={onRedeem}
                  variant="secondary"
                  text="结算 & 提取"
                />
              </>
            ) : (
              <>
                <IconButton onClick={onPresentWithdraw}>
                  <RemoveIcon />
                </IconButton>
                <StyledActionSpacer />
                <IconButton onClick={onPresentDeposit} disabled={!v}>
                  <AddIcon />
                </IconButton>
              </>
            )}
          </StyledCardActions>
        </StyledCardContentInner>
      </CardContent>
    </Card>
  );
};

const StyledCardHeader = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`;
const StyledCardActions = styled.div`
  display: flex;
  justify-content: center;
  margin-top: ${(props) => props.theme.spacing[6]}px;
  width: 100%;
`;

const StyledActionSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledCardContentInner = styled.div`
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
`;

export default Stake;
